<template>
    <div class="appBottom flex-between-center" id="voiceImg">
        <div class="iconItem flex-center" v-for="(item,index) in iconList" :key="index" @click="appBottomSelect(index,item)">
            <div class="bottom-item">
                <!-- <i v-if="item.icon" :class='selectedIndex==index?item.selectIcon:item.icon' class="iconfont bottom-item-icon"></i> -->
                <img class="bottom-item-icon" :src="selectedIndex==index ? item.imgActive : item.img">
                <p class="bottom-item-txt" :class="selectedIndex==index ? 'bottom-item-active' : ''">{{item.title}}</p>
            </div>
            <img v-if="item.isImg" class='wh100' src='./images/navigation_hold.svg' @touchstart.prevent="onTouchStart()" @touchend="onTouchEnd()" />
        </div>

        <el-drawer class="drawerAppHeader" size="100%" :visible.sync="showVoiceDialog" direction="btt" :append-to-body="true" :before-close="closeVoice" :show-close="false" @click.native="closeVoice">

            <div class="voiceView" v-if="showVoiceDialog">
                <div class="loader" :class="activeClass">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>

            <div class="text-box active" >
                <!-- <label>{{$t('voice.tips.downLable')}}</label> -->
                <h2 class="title_1"></h2>
                <span>松开 发送</span>
            </div>

            <div class="video-content-btn pcHide" @touchstart.prevent>
                <div class="holding-bg active" ></div>
                <img src="./images/navigation_holding_blue.svg"/>
                <div class="cover"></div>
            </div>

        </el-drawer>

    </div>
</template>

<script src='./js/bottom.js'></script>

<style lang='scss' src='./css/bottom.scss' scoped></style>